<template>
	<div class="">
		<!-- 搜索区 -->
		<SearchLink></SearchLink>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" indicator-active-color="#fff" indicator-color="rgba(255,255,255,0.5)"
		 circular>
			<swiper-item v-for="(item, index) in swiperData" :key="index">
				<view class="swiper-item">
					<image :src="item.image_src"></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 导航区 -->
		<view class="nav">
			<image v-for="(item, index) in catitems" :key="index" :src="item.image_src" mode=""></image>
		</view>

		<!-- 楼层 -->
		<view class="floor">
			<view class="floor-item" v-for="(itemf, index) in FloorData" :key="index">
				<!-- 时尚女装 -->
				<image :src="itemf.floor_title.image_src"></image>
				<view class="content">
					<image :src="itemf.product_list[0].image_src"></image>
					<view class="right">
						<block v-for="(itemp, index) in itemf.product_list" :key="index">
							<image v-if="index" :src="itemp.image_src"></image>
						</block>
					</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
	// 导入搜索组件
	import SearchLink from '../../components/SearchLink.vue'
	export default {
		components:{
			SearchLink
		},
		data() {
			return {
      swiperData:'',
			catitems:'',
			FloorData:''
			}
		},
		onLoad() {
		this.getSwiperData()
		this.getCatitems()
		this.getFloorData()
		},
		methods:{
			// 轮播图
			 async getSwiperData () {
				this.swiperData = await this.$request({
					url:'/api/public/v1/home/swiperdata'
				})
				// uni.request({
				// 	url:'https://www.uinav.com/api/public/v1/home/swiperdata',
				// 	success:res =>{
				// 		console.log('轮播图:',res)
				// 		let {meta, message} = res.data
				// 		if(meta.status == 200){
				// 			this.swiperData = message
				// 		}
				// 	}
				// })
			},
			// 导航栏 
			async getCatitems() {
				this.catitems = await this.$request({
					url:'/api/public/v1/home/catitems'
				})
				// uni.request({
				// 	url:'https://www.uinav.com/api/public/v1/home/catitems',
				// 	success:res =>{
				// 		console.log('导航栏:',res)
				// 		let {meta, message} = res.data
				// 		if(meta.status == 200){
				// 			this.catitems = message
				// 		}
				// 	}
				// })
			},
			
			// 楼层
		 async getFloorData() {
				this.FloorData = await this.$request({
					url:'/api/public/v1/home/floordata'
				})
				// uni.request({
				// 	url:'https://www.uinav.com/api/public/v1/home/floordata',
				// 	success:res =>{
				// 		console.log('楼层:',res)
				// 		let {meta} = res.data
				// 		if(meta.status == 200){
				// 			this.FloorData = res.data.message
				// 		}
				// 	}
				// })
			},
		}
  }
</script>

<style lang="less" scoped>
	
	swiper {
		height: 340rpx;

		image {
			height: 340rpx;
			width: 100%;
		}
	}

	.nav {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 194rpx;
		width: 100%;
		background-color: #fff;

		image {
			height: 140rpx;
			width: 128rpx;
		}
	}

	// 楼层
	.floor-item {

		// >表示子元素
		>image {
			width: 100%;
			height: 88rpx;
		}
	}

	.content {
		display: flex;
		padding: 20rpx 17rpx;

		>image {
			width: 232rpx;
			height: 386rpx;
		}

		.right {
			flex: 1;
			display: flex;
			flex-wrap: wrap;

			image {
				width: 232rpx;
				height: 188rpx;
				margin: 0 0 10rpx 10rpx;
			}
		}
	}
</style>
